
<template>
    <div class="aside-box">
        <div class="user-top">

            <div class="user-info"> <img src="../../../public/20210719005452_5ad95.jpeg" alt="">
                <p>是小王啊 <span> > </span></p>
            </div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-saoyisao"></use>
            </svg>
        </div>
        <div class="vip-box">
            <div class="vip">
                <div class="vip-top">
                <div class="top-left">
                    <b class="hei">黑胶vip.贰</b> 
                    <span></span>
                </div>
                <span class="huiyuanzhongxin">会员中心</span>
                </div>
                <div class="group">有21成长值待领取 > </div>
                <div class="yanyi">会员表情包上线!一键 get颜艺技能</div>
            </div>

        </div>
        <div class="menu1">
            <van-cell class="dark" is-link title="消息中心"/>
            <van-cell class="dark" is-link title="云贝中心"/>
            <van-cell class="dark" is-link title="创作者中心"/>
        </div>
        <div class="sreve">
            <div class="sreve-tital"><span>音乐服务</span></div>
            <van-cell class="dark" is-link title="云推歌"/>
            <van-cell class="dark" is-link title="云村有票"/>
            <van-cell class="dark" is-link title="多多西西口袋"/>
            <van-cell class="dark" is-link title="商城"/>
            <van-cell class="dark" is-link title="beat专区"/>
            <van-cell class="dark" is-link title="口袋彩铃"/>
            <van-cell class="dark" is-link title="游戏专区"/>

        </div>
        <div class="other">
           
            <van-cell class="dark" is-link title="设置"/>
            <van-cell class="dark" is-link title="深色模式">
                <van-switch  v-model="show" active-color="#ee0a24" inactive-color="#dcdee0"  @click="changecolor"/>
            </van-cell>
            
        </div>
        </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore} from '@/stores/counter'

const counterStore = useCounterStore()
const changecolor = ()=>{
    counterStore.change()
}
const show =ref<boolean>(false)

</script>
<style scoped lang="scss">
.aside-box {
    background-color:var( --asidebakcc);
    width: 100%;
    box-sizing: border-box;
    padding: 0 .28rem;
    color: var(--asidetext);

    >.user-top {
        margin-top: .04rem;
        width: 5.6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >.user-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .24rem;

            >img {
                width: .46rem;
                border-radius: 50%;
                margin-right: 10px;
            }
        }
    }

    >.vip-box {
        width: 100%;
        margin-top: .32rem;
        box-sizing: border-box;
        background-clip: content-box;
        background-color: #524646;
        border-radius: .22rem;

        >.vip {
            width: 100%;
            box-sizing: border-box;
            padding: .3rem;
            position: relative;
            height: 1.84rem;
           

            >.vip-top {
                width: 100%;
                display: block;
                display: flex;
                justify-content: space-between;
                align-items: center;

                >.top-left {
                    display: block;
                    width: 2.76rem;
                    font-size: .24rem;
                    color:#f8e5de
                }
                >.huiyuanzhongxin{
                    width: 1.2rem;
                    height: .44rem;
                    border: .02rem solid #a39394;
                    line-height: 12px;
                    border-radius: .1rem;
                    box-sizing: border-box;
                    padding: 5px;
                 font-size: .24rem;
                }
               
            }
            >.group{
                  position: absolute;
                  left: -0.2rem;
                font-size: 12px;
                transform : scale(0.83,0.83);
                width: 100%;
                color: #787370;
                
            }
            >.yanyi{
                position: absolute;
                left: -0.2rem;
                bottom: .24rem;
              font-size: 12px;
              transform : scale(0.83,0.83);
              width: 100%;
              color: #787370;
            }

        }
    }
    >.menu1{
        margin-top: .24rem;
        border-radius: .2rem;
        overflow: hidden;
    }
    >.sreve{
        margin-top: .24rem;
        border-radius: .2rem;
        overflow: hidden;
        >.sreve-tital{
            background-color:var(--aside-menu-back);
            >span{
                font-size: .24rem;
                padding:.26rem .32rem;
                color: var(--aside-serve-text);
            }
        }
    }
    >.other{
        margin-top: .24rem;
        border-radius: .2rem;
        overflow: hidden;
    }
}

.icon {
    font-size: .4rem;
}
.dark{
    color: var(--asidetext);
    background-color:var(--aside-menu-back)!important ;
}
</style>